<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts Demo</title>
<!-- 必要文件：jquery -->
<script src="/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- HighCharts单文件引入 -->
<script src="/highcharts/code/highcharts.js"></script>
<script src="/highcharts/code/highcharts-3d.js"></script>
<!-- HighCharts导出引入 -->
<script src="/highcharts/code/modules/exporting.js"></script>
<!-- HighCharts导出工具类 -->
<script src="/export-csv/export-csv.js"></script>
<!-- HighCharts工具类 highchartTable单文件引入 -->
<script src="/jquery-highchartTable-plugin/jquery.highchartTable.js"></script>
<!-- HighCharts汉化工具类（放到最后进行汉化） -->
<script src="/highcharts-zh_CN/highcharts-lang-zh_CN.js"></script>
<!-- HighCharts主题 -->
<script th:src="${themeUrl}"></script>

<!-- 必要文件：echarts.ajax自定义封装 -->
<script src="/echarts/echarts.ajax.js"></script>
<!-- 必要文件：ECharts css样式封装 -->
<style type="text/css">
.echarts {
	height: 460px;
	width: 99%;
	overflow: hidden;
	padding: 10px;
	margin: 10px auto;
	border: 1px solid #e3e3e3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		//改变主题下拉框
		$("select[name='theme']").change(selectTheme)
		function selectTheme() {
			var selectText = $(this).find("option:selected").text();
			var selectValue = $(this).val();
			$("#myForm").submit();
		}
	});
</script>
</head>
<body>

	<h1>1 图表主题切换</h1>
	<form id="myForm">
		<select name="theme">
			<option value="" th:selected="${theme==''}">----请选择主题---</option>
			<option value="dark-blue" th:selected="${theme=='dark-blue'}">dark-blue</option>
			<option value="dark-green" th:selected="${theme=='dark-green'}">dark-green</option>
			<option value="dark-unica" th:selected="${theme=='dark-unica'}">dark-unica</option>
			<option value="gray" th:selected="${theme=='gray'}">gray</option>
			<option value="grid-light" th:selected="${theme=='grid-light'}">grid-light</option>
			<option value="grid" th:selected="${theme=='grid'}">grid</option>
			<option value="sand-signika" th:selected="${theme=='sand-signika'}">sand-signika</option>
			<option value="skies" th:selected="${theme=='skies'}">skies</option>
		</select>
	</form>
	<h1>2 HighCharts 3D图表：Bar、Pie</h1>
	<!-- 为 HighCharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-bar3d" style="float: left" class="echarts"
		echarts-type="bar3d" echarts-title="未来一周气温变化" echarts-subtitle="条形图"
		echarts-theme="macarons" echarts-toolbox="false"
		echarts-datazoom="false" echarts-x-axis-name="日期(星期)"
		echarts-y-axis-name="温度(°C)" echarts-url="/highcharts/bar3d"></div>
	<!-- 为 HighCharts 准备一个具备大小（宽高）的 DOM -->
	<div id="demo-pie3d" style="float: left" class="echarts"
		echarts-type="pie3d" echarts-title="搜索引擎现状" echarts-subtitle="饼状图"
		echarts-theme="macarons" echarts-url="/highcharts/pie3d"></div>
	<div style="clear: both"></div>
	<h1>3 HighCharts Table To Charts</h1>
	<h1>一、Table转柱状图</h1>
	<table class="highchart-column" data-graph-container-before="1"
		data-graph-type="column">
		<caption>2016年销售量</caption>
		<thead>
			<tr>
				<th>月份</th>
				<th>销售额</th>
				<th>销售量</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>一月</td>
				<td>8000</td>
				<td>18000</td>
			</tr>
			<tr>
				<td>二月</td>
				<td>12000</td>
				<td>112000</td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript">
		$('table.highchart-column').bind('highchartTable.beforeRender',
				function(event, highChartConfig) {
					//highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
					$.each(highChartConfig.yAxis, function(index, value) {
						value.title.text = value.title.text || '销售量';
					});
				}).highchartTable();
	</script>

	<h1>二、Table转折线图</h1>
	<table class="highchart-line" data-graph-container-before="1"
		data-graph-type="line">
		<caption>2016年销售量</caption>
		<thead>
			<tr>
				<th>月份</th>
				<th>销售额</th>
				<th>销售量</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>一月</td>
				<td>8000</td>
				<td>18000</td>
			</tr>
			<tr>
				<td>二月</td>
				<td>12000</td>
				<td>112000</td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript">
		$('table.highchart-line').bind('highchartTable.beforeRender',
				function(event, highChartConfig) {
					//highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
					$.each(highChartConfig.yAxis, function(index, value) {
						value.title.text = value.title.text || '销售量';
					});
				}).highchartTable();
	</script>


	<h1>三、Table转饼状图</h1>
	<table class="highchart-pie" data-graph-container-before="1"
		data-graph-type="pie">
		<caption>2016销售量</caption>
		<thead>
			<tr>
				<th>月份</th>
				<th>销售量</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>一月</td>
				<td>18000</td>
			</tr>
			<tr>
				<td>二月</td>
				<td>112000</td>
			</tr>
			<tr>
				<td>三月</td>
				<td>12000</td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript">
		$('table.highchart-pie').bind('highchartTable.beforeRender',
				function(event, highChartConfig) {
					//highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
					$.each(highChartConfig.yAxis, function(index, value) {
						value.title.text = value.title.text || '销售量';
					});
				}).highchartTable();
	</script>

	<h1>四、Table转面积图</h1>
	<table class="highchart-area" data-graph-container-before="1"
		data-graph-type="area">
		<caption>2016年销售量</caption>
		<thead>
			<tr>
				<th>月份</th>
				<th>销售额</th>
				<th>销售量</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>一月</td>
				<td>8000</td>
				<td>18000</td>
			</tr>
			<tr>
				<td>二月</td>
				<td>12000</td>
				<td>112000</td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript">
		$('table.highchart-area').bind('highchartTable.beforeRender',
				function(event, highChartConfig) {
					//highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
					$.each(highChartConfig.yAxis, function(index, value) {
						value.title.text = value.title.text || '销售量';
					});
				}).highchartTable();
	</script>

	<h1>五、Table转spline类型图（没看出有什么区别）</h1>
	<table class="highchart-spline" data-graph-container-before="1"
		data-graph-type="spline">
		<caption>2016年销售量</caption>
		<thead>
			<tr>
				<th>月份</th>
				<th>销售额</th>
				<th>销售量</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>一月</td>
				<td>8000</td>
				<td>18000</td>
			</tr>
			<tr>
				<td>二月</td>
				<td>12000</td>
				<td>112000</td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript">
		$('table.highchart-spline').bind('highchartTable.beforeRender',
				function(event, highChartConfig) {
					//highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
					$.each(highChartConfig.yAxis, function(index, value) {
						value.title.text = value.title.text || '销售量';
					});
				}).highchartTable();
	</script>
</body>
</html>